<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <link rel="shortcut icon" type="image/x-icon" href="/bigyi/icon.png">
    <style>
    div.dbody {
        width: 300px;
        height: 100px;
        background-color: #0ff;
        opacity: 0.7;
        position: absolute;
        top: 340px;
        font-size: 30px;
    }
    
    div.rbody {
        width: 300px;
        height: 440px;
        background-color: #ddd;
        float: left;
        position: relative;
        border-width: 1px;
        border-color: #EF8C0B;
        border-style: solid
    }
    
    .body {
        float: left;
        font-size: 50px;
    }
    </style>
    <script>
    window.onload = function() {
        var odiv1 = document.getElementById("div1");
        var obody_a = odiv1.getElementsByTagName("div");
        var odiv2 = document.getElementById("div2");
        var obody_b = odiv2.getElementsByTagName("div");

        function tick(argument) {
            var otime = new Date();
            var trr = [change(otime.getHours()), change(otime.getMinutes()), change(otime.getSeconds())];
            var trr1 = trr.join(':');
            //这个要放在tick（）里面，要不然会出错。
            function change(n) {
                if (n >= 10) {
                    return "" + n;
                } else {
                    return "0" + n
                };
            }; //这个要放在tick（）里面，要不然会出错。

            for (var i = 0; i < obody_a.length; i++) {
                obody_a[i].innerHTML = trr1[i]
               
            };
 document.title=trr1;
        };
        tick();
        setInterval(tick, 1000);

        function tick2(argument) {
            function change(n) {
                if (n >= 10) {
                    return "" + n;
                } else {
                    return "0" + n;
                };
            };
            var otime = new Date();
            //alert(change (otime.getHours()));
            var h = change(otime.getHours());
            var m = change(otime.getMinutes());
            var s = change(otime.getSeconds());

            obody_b[0].innerHTML = h;
            obody_b[2].innerHTML = m;
            obody_b[4].innerHTML = s;
        }

        function pass(argument) {
            var otime = new Date();
            a = otime.getHours();
            b = otime.getMinutes();
            c = otime.getSeconds();

            c++;
            if (c > 60) {
                b++;
                c = 0;
            };
            if (b > 60) {
                a++;
                b = 0;
            };
            if (a > 24) {
                a = 0
            };

            function change(n) {
                if (n >= 10) {
                    return n;
                } else {
                    return "0" + n
                };
            };
            var h = change(a);
            var m = change(b);
            var s = change(c - 1); //必须减一。
            obody_b[0].innerHTML = h;
            obody_b[2].innerHTML = m;
            obody_b[4].innerHTML = s;
            c++;
        };
        tick2();
        setInterval(pass, 1000);

    };
    </script>
</head>

<body>
    <div class="rbody">
        <div id="div1">
            <div class="body">1</div>
            <div class="body">6</div>
            <div class="body">:</div>
            <div class="body">0</div>
            <div class="body">5</div>
            <div class="body">:</div>
            <div class="body">5</div>
            <div class="body">8</div>
        </div>
        <div class="dbody">用gettime和计时器循环setInterval写：
        </div>
    </div>
    <div class="rbody">
        <div id="div2">
            <div class="body">1</div>
            <div class="body">:</div>
            <div class="body">5</div>
            <div class="body">:</div>
            <div class="body">8</div>
        </div>
        <div class="dbody">只有gettime一次，之后用setInterval 循环，if a=a+1算时间：</div>
    </div>
</body>

</html>
